const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  // entry 入口 指定webpack从哪个文件进行打包编译
  entry: ["./src/index.js"],
  // output 出口 指定打包编译后的文件放的位置
  output: {
    // 指定打包编译后文件的位置（必须是绝对路径）
    path: path.resolve(__dirname, "dist1"),
    // 指定打包编译后文件的文件名
    //[name] 使用默认打包后的名字，默认名是：main
    // [hash:8] 随机生成一个8位hash值
    filename: "[name].[hash:8].js",
    clean: true,
  },
  // loader  加载器
  module: {
    rules: [
      {
        test: /\.css$/, //匹配以css结尾的文件
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/, //匹配以less结尾的文件
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.vue$/, //匹配以less结尾的文件
        use: ["vue-loader"],
      },
    ],
  },
  // plugins  插件
  plugins: [
    new HtmlWebpackPlugin({
      // 指定要编译的html文件的文件路径（绝对路径）
      template: path.resolve(__dirname, "public/index.html"),
      //   html文件打包编译后的文件名
      filename: "index.html",
    }),
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
    new VueLoaderPlugin(),
  ],
  // mode   模式
  // mode:'development'  // 开发模式
  mode: "production", // 生产模式模式，会生成dist1文件
  devtool: "source-map", //生成map映射文件
};
